The open source project WebKit added many extensions to CSS,
and several of these are under discussion for addition to CSS3. In the
mobile world we have many WebKit flavors (Safari, Android, webOS, Symbian,
etc.), and the extensions compatibility isn’t perfect across all of
them.
Note:
Many of the WebKit extensions had counterparts for other desktop
browsers, like Mozilla Firefox (using the -moz- prefix) or Opera (using the -o- prefix). In CSS3, many of these extensions
are implemented without any prefix.
The following is a list of the most common WebKit extensions, in
compressed form:
-webkit-border-radius defines
a rounded-corner box. Modern mobile browsers also understand it as
border-radius.
-webkit-box-shadow defines a
shadow for a block element (similar to text-shadow).
-webkit-columns specifies the
width and count of columns.
-webkit-border-image
specifies an image to use as the border for a box
-webkit-text-stroke defines a
color to use for the stroke (outline) of the text.
-webkit-text-fill-color
defines a color to use for filling the text (inside the
stroke).
We’ll look at a few of them here in more detail.
1. Text Stroke and Fill
The stroke and fill properties are a handy way of creating
fancy effects in titles (with big fonts) without the use of images. For
example:
<h1 style="-webkit-text-stroke: blue; -webkit-text-fill-color: yellow">
Great Title!
</h1>
Table 1 shows which
browsers render these two extensions.
Table 1. Text stroke and fill compatibility table
Browser/platform | Text stroke and fill
compatibility |
---|
Safari | Yes |
Android
browser | Yes |
Symbian/S60 | Only fill from
5th edition No support
before 5th edition |
Nokia Series
40 | No |
webOS | Only fill |
BlackBerry | No |
NetFront | No |
Openwave
(Myriad) | No |
Internet
Explorer | No |
Motorola Internet
Browser | No |
Opera
Mobile | No |
Opera Mini | No |